<template>
    <div class="container">
        <div class="imgs">
            <img class="img" :src="props.Info.imgUrl[0]" alt="" >
        </div>
        <div class="remark">
            <van-text-ellipsis rows="2" :content="props.Info.remark" />
        </div>
        <div class="price">
            {{ props.Info.name }}
        </div>
        <div class="publisher">
            <div class="avatar">
                <img class="avatarImg" :src="props.Info.avatar" alt="">
            </div>
            <div class="nickname">
                {{ props.Info.nickname }}
            </div>
        </div>
    </div>
</template>

<script setup lang='ts'>

const props = defineProps({
    /*  ImgHeight: {
         type: [String, Number],// 如果可能存在多个类型，则可以写成 [String,Number]
         default: '300',
         required: true// 是否必传 ，在不声明为true 的情况下，所有prop 默认为非必填。
     }, */
    Info: {
        type: Object,
        default: {}
    }
});


</script>

<style lang='less' scoped>
.container {
    width: 11rem;
    display: flex;
    height: auto;
    box-sizing: border-box;
    padding: 5px;
    flex-direction: column;
    justify-content: flex-start;
    gap: .4125rem;

    .imgs {
        .img {
            width: 100%;
            border-radius: 10px;
        }
    }

    .remark {
        font-size: 1rem;

    }

    .price {
        
        font-weight: 700;
        line-height: 1.25rem;
        height: 1.25rem;
        padding-left: 0.1875rem;
    }

    .publisher {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        gap: 15px;

        .avatar {
            .avatarImg {
                width: 40px;
                height: 40px;
                border-radius: 50%;
            }
        }

        .nickname {
            .textStyle();
        }
    }

}
img[src=""],img:not([src]){
	
    background: url('/share/public/loading.jpg') no-repeat center;
    background-size:100% 100% ;
}

</style>
